<template>
	<view class="vh-80 flex flex-center flex-column grid-gap-6">
		<image class="rounded-4" :src="USERINFO.headimg" style="width: 132px;height: 132px;"></image>
		<button class="btn-primary btn-round" size="mini" @click="chooseImage">更换</button>
		<qf-image-cropper v-if="headimg" :src="headimg" :width="132" :height="132" :show-angle="false"
			:choosable="false" :rotatable="false" @crop="handleCrop"></qf-image-cropper>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore, useRefs } from "@/stores";
import { $page, $api, $message, $helper } from "@/utils";
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);

const headimg = ref('');
const handleCrop = (res?: any) => {
	headimg.value = ''
	if (res) {
		$api.Upload.upload({
			filePath: res.tempFilePath,
			name: 'file',
			formData: {
				is_hide: 1
			}
		}).then((res: any) => {
			uni.showLoading({ title: '保存中...' });
			$api.User.save({
				headimg: res.data.url
			}).then((res: any) => {
				uni.hideLoading();
				$api.User.userinfo(true).then(() => { }).catch(() => { });
				$message.success(res.msg);
				setTimeout(() => {
					$page.back();
				}, 1000);
			}).catch((err: any) => {
				uni.hideLoading();
				$message.error(err.msg);
			})
		}).catch((err: any) => {
			$message.error(err.msg);
		})
	}
}
const chooseImage = () => {
	$helper.chooseImage({
		success: (res: any) => {
			headimg.value = res.tempFilePaths[0]
		}
	})
}
</script>

<style lang="scss" scoped></style>
